<!--
 * @Author: Charsen
 * @Date: 2025-08-01 11:36
 * @LastEditors: wjc
 * @LastEditTime: 2025-10-28 11:29:29
 * @Description: 
-->
<template>
  <div class="left-container">
    <div class="left-header">
      <el-link v-action="actions.add" :underline="false" @click="showCreator">
        <span class="i-custom-add mr-6px"></span>
        添加
      </el-link>
    </div>
    <el-tree
      ref="treeRef"
      :check-on-click-node="true"
      :data="treeData"
      :expand-on-click-node="false"
      :highlight-current="true"
      :props="treeProps"
      class="list-left-tree one-level"
      default-expand-all
      icon-class="el-icon-arrow-right"
      node-key="id"
      @node-click="handleNodeClick"
    >
      <template #default="{ node, data }">
        <div class="custom-tree-node">
          <span class="el-icon-arrow-right">
            {{ node.label }}
            <span v-show="data.personnels_count > 0" class="count">
              （{{ data.personnels_count }}）
            </span>
          </span>

          <span v-if="data.id != 1">
            <Options
              :id="data.id"
              :index="node.index"
              :actions="actions"
              :options="treeOptions"
              @on-edit="showEditor"
              @on-del="handleDestroy"
            />
          </span>
        </div>
      </template>
    </el-tree>

    <Creator
      v-model:visible="createDialog.visible"
      :entity="createDialog.entity"
      :form-size="createDialog.size"
      @on-stored="handleStored"
    />

    <Editor
      v-model:visible="editDialog.visible"
      :entity-id="editDialog.id"
      :entity="editDialog.entity"
      :form-size="editDialog.size"
      @on-updated="handleUpdated"
    />
  </div>
</template>

<script setup lang="ts">
  import { useCreator } from '#/hooks/useCreator'
  import { useDestroy } from '#/hooks/useDestroy'
  import { useEditor } from '#/hooks/useEditor'
  import { getActions } from '#/utils/auth'

  const props = defineProps<{
    currentRole?: any
  }>()

  const emit = defineEmits<{
    (e: 'refresh'): void
    (e: 'role-selected', role: any): void
  }>()

  const treeData = defineModel<any[]>('treeData', { default: [] })

  const entity = 'Role'
  const actions = getActions('system-role')

  const treeRef = ref()
  const treeProps = ref({
    children: 'children',
    label: 'role_name',
  })
  const treeOptions = [{ type: 'edit' }, { type: 'destroy' }]

  const { createDialog, showCreator } = useCreator({ entity })
  const { editDialog, showEditor } = useEditor({ entity })
  const { handleDestroy } = useDestroy({ entity, list: treeData })

  const handleStored = (newRole: any): void => {
    treeData.value.push(newRole)
  }

  const handleUpdated = (model: any) => {
    treeData.value = treeData.value.map((item) => (item.id === model.id ? model : item))
  }

  const handleNodeClick = (node: any) => {
    emit('role-selected', node)
  }

  // 设置当前选中的角色
  watch(
    () => props.currentRole,
    (newRole) => {
      if (newRole && treeRef.value) {
        nextTick(() => {
          treeRef.value.setCurrentKey(newRole.id)
        })
      }
    }
  )
</script>

<style lang="scss" scoped>
  .left-container {
    flex: 0 0 auto;
    align-self: stretch;
    width: 23%;
    padding: 10px;

    .left-header {
      height: 40px;
      margin: 10px 10px 0;
      border-bottom: 1px solid #ebeef5;
    }
  }
</style>
